<template>
  <!-- 个人中心首页 -->
  <div class="centerIndex">
      <!-- 头部 -->
      <head-usual :title="indexTitle" :to="to"></head-usual>
      <div class="centerHd">
      <!-- 个人信息一览 -->
      <div class="indexHd">
          <!-- 头像及基本信息 -->
          <dl>
              <dt>
                  <img v-bind:src="UserInfo.headportrait" class="touxiang"/>
                  <img src="~@/assets/touxiang_camery.png" class="touxiang-came"/>
                  <input type="file" class="inputfiles"  @change="upload"/>
              </dt>
              <dd>
                  <p>
                      <span :style="UserInfo.grade!=0?'color:#fd4f00':''" >{{UserInfo.name}}</span>
                      <span>{{UserInfo.type}}</span>
                      <!-- <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangji"></use>
                      </svg> -->
                  </p>
                  <div class="company-dd-p2">
                        <div class="company-dd-01 company-dd-squre" v-if="MIcon.isRealName">
                            <img src="~@/assets/renzheng.png" class="company-dd-01-img"/>
                        </div>
                        <div class="company-dd-02 company-dd-squre" v-if="MIcon.isPhone">
                            <img src="~@/assets/phone.png" class="company-dd-02-img"/>
                        </div>
                        <div class="company-dd-03 company-dd-squre" v-if="MIcon.isEmail">
                            <img src="~@/assets/email.png" class="company-dd-03-img"/>
                        </div>
                        <!-- <div class="company-dd-04 company-dd-squre">
                            <img src="~@/assets/wechat.png" class="company-dd-04-img"/>
                        </div> -->
                        <div class="company-dd-05 company-dd-squre" v-if="MIcon.isVip">
                            <img src="~@/assets/vip1.png" class="company-dd-05-img"/>
                        </div>
                        <div class="company-dd-06 company-dd-squre"  v-if="MIcon.isCertificate">
                            <img src="~@/assets/small_zhengshu.png" class="company-dd-06-img"/>
                        </div>      
                    </div>
                    <router-link v-if="type==1"  to="/user/resume2">查看简历</router-link>
              </dd>

          </dl>
      </div>
      <!-- 下方3个小分类 -->
      <div class="class-3">
          <router-link to="/user/project">
              <P>{{InfoAmount.ProjectCount}}</P>
              <p>承接项目</p>
              <span class="fenge01"></span>
          </router-link>
          <router-link to="/user/position">
              <P>{{InfoAmount.ReleaseJobCount}}</P>
              <p v-if="type==2">发布职位</p>
              <p v-else>投递职位</p>
              <span class="fenge02"></span>
          </router-link>
          <router-link to="/user/resume">
              <P>{{InfoAmount.InfoCompleteAmount}}</P>
              <p>资料完成度</p>
          </router-link>

      </div>
      </div>
      <!-- 下部各项设置 -->
      <div class="centerBd">
          <ul class="area-1">
                <li>
                     <router-link to="/user/project">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiangmu3"></use>
                        </svg>
                        <span>我的项目</span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                     </router-link>       
                </li>
                <li>
                    <router-link to="/user/position">
                        <svg class="icon icon-posi" aria-hidden="true">
                            <use xlink:href="#icon-zhiwei1"></use>
                        </svg>
                        <span>职位管理</span>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>          
                </li>
                <li>
                    <router-link to="/user/collect">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-Collection-wx3"></use>
                        </svg>
                        <span>我的收藏</span>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>          
                </li> 
                 <li>
                    <router-link to="/user/movement">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tupian"></use>
                        </svg>
                        <span>我的晒场</span>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>          
                </li>
                 <li >
                    <router-link :to="{path:'/user/service',query:{cmd:'own'}}">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fuwu"></use>
                        </svg>
                        <span>我的服务</span>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>          
                </li>
                <li>
                    <router-link :to="type==1?'/user/vip':'/user/cvip'">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huiyuan"></use>
                        </svg>
                        <span>会员权益</span>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>          
                </li>   
                 <li class="li-bottom">
                    <router-link to="/user/invite/introduce">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yaoqing"></use>
                        </svg>
                        <span>邀请好友</span>
                        <svg class="icon " aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>          
                </li>   
          </ul>
          <ul class="area-1">
                <li>
                    <router-link to="/user/security">
                        <svg class="icon area-2-icon1" aria-hidden="true">
                            <use xlink:href="#icon-anquan"></use>
                        </svg>
                        <span>账号安全</span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>           
                </li>
                 <li>
                <router-link to="/user/kefu">
                        <svg class="icon area-2-icon1" aria-hidden="true">
                            <use xlink:href="#icon-kefu1"></use>
                        </svg>
                        <span>联系客服</span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>           
                </li>
                <li class="li-bottom">
                    <router-link to="/user/resume">
                        <svg class="icon area-2-icon2" aria-hidden="true">
                            <use xlink:href="#icon-xujiaozhanghuxinxi"></use>
                        </svg>
                        <span>我的账户</span>
                        <svg class="icon area-3-icon" aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>           
                </li>
          </ul>
          
           <ul class="area-1">
                <li>
                    <router-link to="/user/message">
                        <svg class="icon area-3-icon1" aria-hidden="true">
                            <use xlink:href="#icon-wodexiaoxi"></use>
                        </svg>
                        <span>{{type==1?'我的消息':'企业消息'}}</span>
                        <span class="span-special">{{InfoAmount.MessageCount}}条</span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>           
                </li>
                <li class="li-bottom" >
                    <router-link to="/user/about">
                        <svg class="icon area-3-icon2 " aria-hidden="true">
                            <use xlink:href="#icon-iconset0103"></use>
                        </svg>
                        <span>关于筑功者</span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shang-copy-copy-copy"></use>
                        </svg>
                    </router-link>           
                </li>
          </ul>
      </div>
      <!-- 退出登录 -->
      <button class="exit-login" @click="handleExit">退出登录</button>
      <!-- 底部 -->
      <footer-total></footer-total>
  </div>
</template>

<script>
import { GetUserInedx } from "@/api/user/index";
import { ChageAvatar } from "@/api/user/auth";
import {UploadPicture} from '@/api/user/upload';
import cache from "@/utils/cache";
export default {
  data() {
    return {
      UserInfo: "",
      id: 0,
      MIcon: "",
      InfoAmount: "",
      indexTitle: "个人中心",
      to:'/',
      type:1,
    };
  },
  created() {
    this.id = this.$store.state.userinfo.id;
    this.type = this.$store.state.userinfo.type;
    if(this.type==2){
      this.indexTitle="企业中心";
    }
    this.Initialization();
  },
  methods: {
    gotoQQ(){
      console.log("xxx");
        //window.location.href="mqqwpa://im/chat?chat_type=wpa&uin=601108011&version=1&src_type=web&web_src=oicqzone.com";
        var url="http://www.zhugongzhe.com/res/gotoqq.html";
        window.location.href=url;

    },
    Initialization() {
      this.$indicator.open();
      setTimeout(() => {
        GetUserInedx().then(res => {
          if (res.StatusCode === 200) {
            this.UserInfo = res.Data.UserInfo;
          //  this.$store.state.userinfo = this.UserInfo;
            this.MIcon = res.Data.MIcon;
            this.InfoAmount = res.Data.InfoAmount;
            this.$indicator.close();
          }
          else{
            this.$indicator.close();
            this.$toast(res.Data);
          }
        });
      }, 100);
    },
    turn_to_info() {
      this.$router.push("/infoEdit");
    },
    turn_resume() {
      this.$router.push("/resume");
    },
    turn_position() {
      this.$router.push("/person/position");
    },
    turn_project() {
      this.$router.push("/person/project");
    },
    turn_security() {
      this.$router.push("/security");
    },
    turn_collect() {
      this.$router.push("/collect");
    },
    turn_news() {
      this.$router.push("/news");
    },
    // 退出登录
    handleExit() {
      cache.removeLocal('zgz_token');
      cache.removeLocal('zgz_user');
     this.$router.push("/auth/login"); 
    },
    // 更换头像
    upload(){
     var file=$(".inputfiles")[0].files[0];
      let param = new FormData();
      let reader = new FileReader();
     let that=this;
      if(file!=''){  
           param.append('file', file,file.name);
           UploadPicture(param).then(res=>{
          if(res.StatusCode===200)
          {
            let xx=res.Data.src.replace('ms','mx');
             reader.onload = function() {
               ChageAvatar(xx).then(res=>{
                  if(res.StatusCode===200){
                    that.UserInfo.headportrait=xx;
                  }
                  else{
                      this.$toast("网络连接异常");
                  }
               });
            };
               reader.readAsDataURL(file);
          }
          else{
                 this.$toast("网络连接异常");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.centerIndex {
  padding-bottom: 50px;
}
.headUsual {
  border-bottom: 1px solid #f4f4f4;
}
.centerHd {
  padding-bottom: 16px;
  border-bottom: 10px solid #f4f4f4;
  // 个人信息一览
  .indexHd {
    overflow: hidden;
    padding: 24px 24px 16px 24px;
    > dl {
      > dt {
        width: 70.6px;
        height: 70.6px;
        border-radius: 50%;
        float: left;
        position: relative;
        .touxiang {
          max-width: 100%;
          max-height: 100%;
          border-radius: 50%;
          vertical-align: middle;
        }
        .touxiang-came{
          position: absolute;
          bottom: 0;
          right: 15px;
          width: 16px;
          height: 14px;
          display: block;
          z-index: 998;
        }
        .inputfiles{
          width: 75px;
          height: 75px;
          display: block;
          border-radius: 50%;
          position: absolute;
          top:0;
          left:0;
          opacity: 0;
        }
      }
      > dd {
        float: left;
        margin-left: 14px;
        > :first-child {
          > :first-child {
            font-size: 18px;
            color: #282828;
            font-weight: bolder;
          }
          > :nth-child(2) {
            font-size: 14px;
            color: #fd4f00;
            padding: 0px 6px;
            border: 1px solid #fd4f00;
            border-radius: 19px;
            display: inline-block;
            margin-left: 8px;
            padding-top: 3px;
          }
          // > :nth-child(3) {
          //   color: #fd4f00;
          //   font-size: 19px;
          //   position: absolute;
          //   left: 63.3px;
          //   margin-top: 28px;
          // }
        }
        > :nth-child(2) {
          display: block;
          height: 18.3px;
          margin-top: 11px;
          margin-bottom: 11px;
          overflow: hidden;
          .company-dd-01 {
            width: 16.3px;
            height: 16.3px;
            background: #fbdc4f;
            text-align: center;
            display: block;
          }
          .company-dd-squre {
            width: 20px;
            height: 20px;
            text-align: center;
            display: block;
            float: left;
            margin-right: 3.5px;
          }

          .company-dd-01-img {
            width: 11.04px;
            height: 13px;
            display: block;
            margin: 3.66px auto;
          }
          .company-dd-02 {
            background: #ff9c00;
          }
          .company-dd-02-img {
            width: 8.17px;
            height: 13.9px;
            display: block;
            margin: 2.485px auto;
          }
          .company-dd-03 {
            background: #3887fe;
          }
          .company-dd-03-img {
            width: 13.42px;
            height: 9.76px;
            display: block;
            margin: 4.15px auto;
          }
          .company-dd-04 {
            background: #84d945;
          }
          .company-dd-04-img {
            width: 12.2px;
            height: 9.76px;
            display: block;
            margin: 4.15px auto;
          }
          .company-dd-05 {
            background: #e74445;
          }
          .company-dd-05-img {
            width: 10.98px;
            height: 9.028px;
            display: block;
            margin: 4.45px auto;
          }
          .company-dd-06 {
            background: #fbcd4f;
          }
          .company-dd-06-img {
            width: 14.64px;
            height: 14.64px;
            display: block;
            margin: 2.15px auto;
          }

          .company-dd-txt {
            display: block;
            float: left;
            font-size: 12px;
            color: #ffffff;
            margin-right: 6px;
            line-height: 16px;
          }
        }
        > :nth-child(3) {
          font-size: 16px;
          color: #999999;
        }
      }
    }
  }
  // 下方3个小分类
  .class-3 {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 25px;

    > a {
      width: 33.3%;
      display: block;
      display: flex;
      align-items: center;
      flex-direction: column;
      > :first-child {
        color: #282828;
        font-size: 16px;
      }
      > :nth-child(2) {
        color: #666666;
        font-size: 14px;
      }
      .fenge01 {
        width: 1px;
        height: 20px;
        display: block;
        border: 1px solid #eeeeee;
        background: #eeeeee;
        position: absolute;
        left: 138px;
        margin-top: 11.5px;
      }
      .fenge02 {
        width: 1px;
        height: 20px;
        display: block;
        border: 1px solid #eeeeee;
        position: absolute;
        background: #eeeeee;
        left: 276px;
        margin-top: 11.5px;
      }
    }
  }
}
// 下方各类设置
.centerBd {
  
  .area-1 {
    border-bottom: 10px solid #f4f4f4;
    > li {
      overflow: hidden;
      height: 60px;
      border-bottom: 1px solid #f4f4f4;
      font-size: 18px;
      margin-left: 12px;
      margin-right: 12px;
      > a {
        display: block;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        > span {
          display: block;
          float: left;
        }
        .span-special {
          margin-left: 216px;
          font-size: 14px;
          color: #999999;
        }
        > :first-child {
          display: block;
          float: left;
          margin-right: 13px;
          color: #fd4f00;
        }
       
        .area-3-icon1 {
          color: #282828;
        }
         .area-3-icon2 {
          color: #282828;
          font-size: 20px;
        }
        > :last-child {
          display: block;
          position: absolute;
          right: 6px;
        }
      }
    }
    .li-bottom {
      border-bottom: none;
    }
  }
}
.icon-posi{
  font-size: 20px;
}
.area-2-icon1{
  font-size: 20px;
   color: #3887fe!important;
}
.area-2-icon2{
  font-size: 21px;
   color: #3887fe!important;
}
// 退出登录
.exit-login{
  width: 80%;
  height: 50px;
  line-height: 50px;
  display: block;
  margin: 20px auto;
  border-radius: 30px;
  color:#fff;
  background: #3887fe;
  margin-bottom: 38.3px;
  font-size: 16px;
}

</style>
